<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>联想 Z5</title>
<link rel="stylesheet"	href="${basePath }static/bootstrap-3.3.7/dist/css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css"	href="${basePath }static/css/sen/showcomment.css" />
<link rel="icon" type="image/x-icon"	href="${basePath }static/img/HomePageImg/cat.png" />
<link rel="stylesheet" href="${basePath }static/css/HomePageCss/cool.css" />
<link rel="stylesheet" href="${basePath }static/css/HomePageCss/model.css" />
<link rel="stylesheet" href="${basePath }static/css/HomePageCss/zq.css" />
<link rel="stylesheet" href="${basePath }static/css/HomePageCss/cool.css" />
<link rel="stylesheet" href="${basePath }static/css/bao/productTwo.css" />

</head>

<body>

<!-- 插入前一栏 -->
<%@ include file="../menu.jsp" %>

<!-- 隐藏内容 -->
<input type="hidden" id="usertel" name="usertel" value="<%=session.getAttribute("userTel") %>" />
<input type="hidden" id="phoneid" name="phoneid" value="${phoneid}">

	<div class="bian" style="margin: 0px; background-color: white;">
		<div class="logo pinned">
		<a href="#"> <img src="${basePath }static/img/HomePageImg/Lenovo.jpg" /></a>
		</div>		
		<div class="yanse" style="background-color: white;">
			<div class="lunbo"
				style="height: 500px; width: 36%; margin-left: 60px; margin-top: 0px;">
				<div id="picture_a">
				</div>
				<img src="${basePath }static/img/sj/b.jpg" height="250px" width="250px" /> 
				
			</div>
			<div class="read"
				style="height: 500px; width: 50%; margin-left: 0px; <!--background-color: white;--> ">
				<div id="read1">
					<h1 id="title"></h1>
<!-- 联想z5 note 4GB+64GB 墨岩黑 -->
				</div>
				<div id="read1">
					<p>5000mAh超长续航，6.2英寸超视野全面屏，双域隔离，七重安全</p>
				</div>
				<div id="read1">
					<p style="color: red;">【赠豪礼】赠小度智能音箱（将随手机一并寄出，不在订单中显示）</p>
				</div>
				<div id="read2" style="background-color: #F5F5F5;">
					<div>
						<p>价格：</p>
						<h2 style="color: darkred;" id="jiaqian"></h2>

					</div>
					<div>
						<p>支持：分期付款&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;顺丰快递&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;七天无理由退款</p>
					</div>
				</div>
				<div id="read1">
					<p>选择颜色：</p>
				</div>
				<div class="read4">
					<p class="col2">亮黑</p>
					<p class="col2">莫奈金</p>
				</div>
				<div id="read5" style="margin-top: 10px;">
					<p>选择数量：</p>
					<div class="num">
						<input type="text" value="1" id="tx1">
						<button type="button" id="remove" onclick="remove1()">-</button>
						<button type="button" id="add" onclick="add1()">+</button>
					</div>
					<div id="read3" style="margin-top: 10px;">
						<button type="button" onclick="addCar()" class="goumai">加入购物车</button>
						<button type="button" class="goumai" onclick="aOrder()">立即购买</button>
					</div>
				</div>
			</div>
			<div class="detail" style="width: 100%; height: 40px;">

				<a class="aaaa" href="javascript:void(0)"> <h22>商品详情</h22></a> <a
					class="bbbb" href="javascript:void(0)"> <h22>配置信息</h22></a> <a
					class="cccc" href="javascript:" onclick="dojquery()"> <h22>商品评价</h22></a>
			</div>
			<div class="circle" style="display: block; margin-top: 100px;">
				<div id="circle1">
					<img src="${basePath }static/img/sj/01.jpg" style="width: 100%;" />
				</div>
				<div id="circle1">
					<img src="${basePath }static/img/sj/02.jpg" style="width: 100%;" />
				</div>
				<div id="circle1">
					<img src="${basePath }static/img/sj/03.jpg" style="width: 100%;" />
				</div>
				<div id="circle1">
					<img src="${basePath }static/img/sj/04.jpg"
						style="width: 100%; height: 500px;" />
				</div>
				<div id="circle1">
					<img src="${basePath }static/img/sj/05.jpg" style="width: 100%;" />
				</div>
				<div id="circle1">
					<img src="${basePath }static/img/sj/06.jpg" style="width: 100%;" />
				</div>
				<
				<div id="circle1">
					<img src="${basePath }static/img/sj/07.jpg" style="width: 100%;" />
				</div>
				<div id="circle1">
					<img src="${basePath }static/img/sj/08.jpg" style="width: 100%;" />
				</div>
				<div id="circle1">
					<img src="${basePath }static/img/sj/09.jpg" style="width: 100%;" />
				</div>
			</div>
		</div>
		<div style="clear: both"></div>
		<div id="bianb" style="margin: 50px; background-color: white;">
			<div class="circle2"
				style="background-color: white; margin-top: 50px;">

				<div id="yis">
					<!--	<p>颜色</p>-->
					<div id="yi">
						<img src="${basePath }static/img/sj/011.jpg" />
						<h3>莫奈灰</h3>
					</div>
					<div id="yi">
						<img src="${basePath }static/img/sj/012.jpg" />
						<h3>梵高金</h3>
					</div>
				</div>
				<div id="er"
					style="border: solid 1px; border-color: #E4E4E4; width: 100%; margin: 0px;">
					<p>系统</p>
					<div id="ers" style="text-align: center;">
						<h3>ZUI（基于Android 8.0)</h3>
					</div>
				</div>
				<div id="san"
					style="border: solid 1px; border-color: #E4E4E4; width: 100%;">
					<p>硬件参数</p>
					<div id="sans" style="text-align: center;">
						<p>CPU：高通骁龙430八核处理器，最高主频1.4GHz</p>
						<p>RAM:3GB/64GB(最大支持外置MicroSD卡扩展至256GB）</p>
						<p>感应器类型：指纹传感器，距离传感器，光线传感器，加速度传感器</p>
					</div>
				</div>
				<div id="si"
					style="border: solid 1px; border-color: #E4E4E4; width: 100%;">
					<p>相机</p>
					<div id="sisi" style="text-align: center;">
						<p>像素：1200万像素摄像头</p>
						<p>对焦技术：TOF（激光对焦）+PDAF（相位检测自动对焦）</p>
						<p>闪光灯：单色温闪光灯</p>
						<p>功能：延时录像，专业模式，全景拍照，慢动作，稳定器，百级美颜</p>
						<p>摄像：f/1.8光圈镜头</p>
					</div>
				</div>
				<div id="wu"
					style="border: solid 1px; border-color: #E4E4E4; width: 100%;">
					<p>特色功能</p>
					<div id="wus" style="text-align: center;">
						<p>5000mAh超长待机30天，快充，OTG反向充电，金属材质三卡槽，指纹解锁及支付，面部解锁</p>
					</div>
				</div>
			</div>
		</div>
		<div class="comment-area" style="display: none; width: 1200px">
			<div class="filter-lsit" style="width: 500px; height: 50px;">
				<ul class="comment-filter-list">
					<li><input type="radio" name="filter-radio" checked="checked"
						value="radio1">全部评价</input></li>
					<li><input type="radio" name="filter-radio" value="radio2">追评</input>
					</li>
					<li><input type="radio" name="filter-radio" value="radio3">有图的评价</input>
					</li>
				</ul>
			</div>
			<div id="reviewcontent1">
				<div id="userid" style="width: 150px; height: 210px; float: left;">183*******134</div>
				<div id="viewcontent">
					<div id="userreview" style="height: 99px;">很好~~起来很舒服！！！</div>
					<div id="servicereview"
						style="height: 75px; width: 1000px; padding: 10px 20px; background-color: #E8E8E8; left: 10px;">
						<div>客服:</div>
						&nbsp;谢谢支持~！！
					</div>
				</div>
			</div>
			<div id="reviewcontent2"></div>
		</div>
</body>

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="${basePath }static/js/jquery-1.12.4.min.js"	charset="utf-8"></script>
<script type="text/javascript" src="${basePath }static/js/HomePageJs/layer-v3.1.1/layer/layer.js"></script>
<script type="text/javascript" src="${basePath }static/js/shoppingCar/addCar.js"></script>



<script type="text/javascript">
	function dojquery() {
		// 使用jquery进行ajax请求处理

		$.ajax({
					type : "GET",
					url : 'QueryComment',
					data : $("#reviewcontent").serialize(),
					dataType : "json",
					success : function(data) {
						// 将请求的数据放输出到div里面
						console.info(data);
						var strHtml = "";
						$.each(data,function(index, eachVal) {
											var userID = eachVal.userid;
											var showID = userID.replace(/(\d{3})\d{4}(\d{4})/,'$1****$2');
											strHtml += "<div id='reviewcontent'>";

											strHtml += "<div id='userid' style='float:left;text-align:center'>";
											strHtml += showID;
											strHtml += "</div>";

											strHtml += "<div id='viewcontent'>";

											strHtml += "<div id='userreview'>";
											strHtml += eachVal.userreview;
											strHtml += "</div>";

											if (eachVal.servicereview == null) {
												servicereview = "暂未回复";
											} else {
												servicereview = eachVal.servicereview;
											}

											strHtml += "<div id='servicereview' style='width:1000px;display:1;'>";
											strHtml += "<div>";
											strHtml += "客服：";
											strHtml += "</div>";
											strHtml += "&nbsp;&nbsp;&nbsp;&nbsp;"
													+ servicereview;
											strHtml += "</div>";

											strHtml += "</div>";
											strHtml += "</div>";

										});

						// 把解析的html内容，使用dom操作赋值到表格中
						$("#reviewcontent2").html(strHtml);
					},
					error : function(data) {
						alert("请求失败" + data);
					}

				});
	}
</script>
<script language="javascript">
	function add1() {
		var obj = document.getElementById("tx1");
		if (obj.value == 0) {
			return;
		}

		obj.value = parseInt(obj.value) + 1;
	}

	function remove1() {
		var obj = document.getElementById("tx1");

		if (obj.value == 0) {
			return;
		}

		obj.value = parseInt(obj.value) - 1;
	}
</script>
	
</script>
<!--<script>
$(document).ready(function(){
  $("#col1").click(function(){
    $("#col2").hide();
  });
});
</script>
<script>
$(document).ready(function(){
  $("#col2").click(function(){
    $("#col1").hide();
  });
});
</script>-->

<script type="text/javascript">
	$(".aaaa").click(function() {
		$(".circle").css("display", "block");
		$(".circle2").css("display", "none");
		$(".circle3").css("display", "none");
	});

	$(".bbbb").click(function() {
		$(".circle2").css("display", "block");
		$(".circle").css("display", "none");
		$(".circle3").css("display", "none");
	});
	$(".cccc").click(function() {
		$(".comment-area").css("display", "inline-block");
		$(".comment-area").css("margin-left", "150px");
		$(".circle").css("display", "none");
		$(".circle2").css("display", "none");

	})
</script>
<%
	//获取上层页面传入的phoneid
	String buttonValue = request.getParameter("name");
%>
<%-- 	<%=buttonValue %> --%>
<script type="text/javascript">
	$(function() {
		
		var $phoneid = $("#phoneid").val();
		
			$.ajax({
				type : "POST", // 请求类型	
			    url : "QueryPhoneMsg", // 请求的url
				data : "phoneid=" + $("#phoneid").val(),// 发送的数据 使用serialize方法替代手动拼写数据串
				//dataType : "json",
				success : function(data, textStatus, jqXHR) {
					console.info(data);
					console.info(textStatus);
					
					$.each(data,function(index,item){	
						
						var phongImg = item.phoneimg;
						
						$("#jiaqian").html(item.phoneprice);
						$("#title").html(item.phonename);
						$("#read1").html(item.phonedescription);
						//$("#picture_a").html('<img src="'+phongImg+'" height="250px" width="250px" alt="图片">');
						
					})
						
				},
				
					error : function(data) {
						alert("请求失败" + data);
					}
				});                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         

			});

</script>

<script type="text/javascript">		
function aOrder(){
	
	//设置localStorage,sessionStorage
	window.sessionStorage.setItem('phoneNum',$("#tx1").val());
	
	var isUserTel = $("#usertel").val();
	
	if(isUserTel!=null && isUserTel!=""){
		window.location.href='${basePath }jump?pg=order';
	}else{
		parent.layer.msg('请先登陆', {
			icon : 4
		});
	}
	
}


</script>

</html>